<template>
	<div class="HeadImg">
		<div class="head">
			修改头像
			<div class="box"></div>
			<button class="btn1" @click="$router.push('/backstage/details')">BACK</button>
			<div class="clear"></div>
		</div>
		<div class="body">
			<Upload ref="img" action="/Shop/Index/upload_menu" :on-success="success" :data="{img_id:this.$store.state.id.id,img_name:this.name}">
				<Button icon="ios-cloud-upload-outline">上传头像</Button>
			</Upload>
		</div>

	</div>
</template>

<script>
	export default {
		name: "HeadImg",
		data() {
			return {
				name:''
			}
		},
		methods:{
			success(){
				this.$Message.success('修改成功')
				return this.$router.push('/backstage/details')
			}
		},
		async mounted(){
			this.name = localStorage.account;
		}
	}

</script>

<style lang="less">
	.HeadImg{
		max-width: 700px;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		background: #c1bcc2;
		.body{
			padding: 20px;
		}
		.head {
			height: 35px;
			color: aliceblue;
			width: 100%;
			line-height: 35px;
			background: rgb(155, 177, 200);
			font-size: 22px;
			text-align: center;
			padding-right: 84px;
		}
		.btn1 {
			background: aliceblue;
			font-size: 16px;
			margin-top: 7px;
			margin-left: -1px;
			color: rgb(155, 177, 200);
			height: 22px;
			line-height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			margin-left: 15px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid aliceblue;
		}

		.clear {
			clear: both;
		}
	}
</style>